<template>
  <div class="status-bar">
    <div class="status-left">
      <span>总下载: {{ formatSize(totalDownloaded) }}</span>
      <span>速度: {{ formatSpeed(totalSpeed) }}</span>
      <span>活动: {{ activeCount }}</span>
    </div>
    <div class="status-right">
      <button class="btn" @click="$emit('pause-all')" :disabled="!hasActiveOrWaiting">
        全部暂停
      </button>
      <button class="btn" @click="$emit('resume-all')" :disabled="!hasPausedOrFailed">
        全部开始
      </button>
      <button class="btn danger" @click="confirming = true" :disabled="!hasCompleted">
        清除已完成
      </button>
    </div>

    <!-- Confirm Modal -->
    <div v-if="confirming" class="modal-mask" @click.self="confirming=false">
      <div class="modal-card">
        <div class="modal-title">确认清除</div>
        <div class="modal-body">确定要删除所有已完成的任务吗？此操作不可恢复。</div>
        <div class="modal-actions">
          <button class="btn" @click="confirming=false">取消</button>
          <button class="btn danger" @click="onConfirmClear">确定删除</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const confirming = ref(false)

defineProps({
  totalDownloaded: { type: Number, default: 0 },
  totalSpeed: { type: Number, default: 0 },
  activeCount: { type: Number, default: 0 },
  hasActiveOrWaiting: { type: Boolean, default: false },
  hasPausedOrFailed: { type: Boolean, default: false },
  hasCompleted: { type: Boolean, default: false }
})

const emit = defineEmits(['pause-all','resume-all','clear-completed'])

function onConfirmClear(){
  confirming.value = false
  emit('clear-completed')
}

function formatSize(bytes) {
  if (!bytes) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let size = parseFloat(bytes)
  let unitIndex = 0
  while (size >= 1024 && unitIndex < units.length - 1) {
    size /= 1024
    unitIndex++
  }
  return `${size.toFixed(2)} ${units[unitIndex]}`
}

function formatSpeed(bytesPerSecond) {
  if (!bytesPerSecond) return '0 B/s'
  return `${formatSize(bytesPerSecond)}/s`
}
</script>

<style scoped>
/* 复用 App.vue 的 .status-bar, .status-left, .status-right 与 .btn 样式 */

/* Modal */
.modal-mask{ position: fixed; inset: 0; background: rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index: 50; }
.modal-card{ width: 360px; max-width: 90vw; background: var(--card-bg); border:1px solid var(--border-color); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); padding: 14px; display:grid; gap:10px; }
.modal-title{ font-weight: 600; font-size: 14px; }
.modal-body{ color: var(--text-secondary); font-size: 13px; }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end; }
</style>
